<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=750, target-densitydpi=device-dpi, user-scalable=no">
  <title>中信证券资管</title>
  <link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>

  <!--loading-->
  <div class="loading">
    <div class="load-img"><img src="img/white-logo.png"></div>
    <div class="loading-content">
      <div class="loading-content-img">
        <img src="img/loading.png">
      </div>
      <div class="loading-content-text">
        <span>LOADING...</span>
        <span class="load-num"></span>
      </div>
    </div>

    <div class="load-tip">
      <span>市场有风险  投资需谨慎 </span>
    </div>
  </div>

  <!--container-->
  <div class="container">

    <div class="bgmusic" plays="play"><img src="img/sound-on.png"></div>
    <!-- 页面1 欢迎-->
    <div class="page page1">
      <div class="load-img"><img src="img/white-logo.png"></div>
      <div class="img-pos img1"><img src="img/happy-text.png"></div>
      <div class="img-pos img2"><img src="img/loukong.png"></div>
      <div class="img-pos img3"></div>
      <div class="img-pos img4 click-next"><img src="img/hello.png"></div>
      <div class="img-pos img5 click-next"><img src="img/light.png"></div>
      <div class="img-pos img6 click-next"><img src="img/light.png"></div>
      <div class="img-pos img7 click-next">点击上方文字继续>></div>
      <div class="load-tip">
        <span>市场有风险  投资需谨慎 </span>
      </div>
  </div>

    <div class="index-page" id="start-content">
      <div class="load-img"><img src="img/white-logo.png"></div>
      <div class="start-background">
        <img src="img/start.png">
      </div>
      <div class="start-btn">
        <img src="img/start-btn.png" alt="">
      </div>
      <div class="load-tip">
        <span>市场有风险  投资需谨慎 </span>
      </div>
    </div>

    <div class="page page2" id="select-content">
      <div class="load-img"><img src="img/white-logo.png"></div>
      <div class="content-background">
        <div class="select-wrap">
          <p class="select-tit">选择你的祝福语</p>
          <div class="select-box">
            <div id="box-0">
              <div class="blessing-text blessing-text-active">
                <p>春风可待</p>
                <p>美梦常在</p>
                <p>这个新年当然是好运的邮差</p>
              </div>
              <div class="blessing-text">
                <p>愿2024/全糖去冰</p>
                <p>多吃不胖/积极向上</p>
              </div>
              <div class="blessing-text">
                <p>祝新年[富][瘦]双全</p>
                <p>Food流油</p>
              </div>
              <div class="blessing-text">
                <p>改革春风吹满地</p>
                <p>新的一年要争气</p>
              </div>
              <div class="blessing-text">
                <p>2024</p>
                <p>浪漫永不散场</p>
              </div>
            </div>
            <div id="box-1">
              <div class="blessing-text blessing-text-active">
                <p>愿你一直</p>
                <p>站在自己热爱的世界里</p>
                <p>闪闪发光</p>
              </div>
              <div class="blessing-text">
                <p>祝旧愿皆已偿/来年有新愿</p>
                <p>愿山高有行路/水深有渡舟</p>
              </div>
              <div class="blessing-text">
                <p>日迈月征/朝暮轮转</p>
                <p>愿新年胜旧年</p>
                <p>欢愉且胜意/万事皆可期</p>
              </div>
              <div class="blessing-text">
                <p>愿所念之人/平安喜乐</p>
                <p>愿所想之事/顺心如意</p>
              </div>
              <div class="blessing-text">
                <p>有幸相遇</p>
                <p>祝我们人生尽欢</p>
                <p>爱至圆满</p>
              </div>
            </div>
            <div id="box-2">
              <div class="blessing-text blessing-text-active">
                <p>家人闲坐/灯火可亲</p>
                <p>新年伊始/喜乐安宁</p>
              </div>
              <div class="blessing-text">
                <p>陈旧的酒不必尽饮</p>
                <p>且烹新茶一杯敬来年</p>
                <p>新年快乐/你我</p>
              </div>
              <div class="blessing-text">
                <p>律回春渐/新元肈启</p>
                <p>愿此去今年/三餐四季/温柔有趣</p>
                <p>欢愉胜意/万事可期</p>
              </div>
              <div class="blessing-text">
                <p>即使年年不相见</p>
                <p>也要岁岁皆平安</p>
              </div>
              <div class="blessing-text">
                <p>岁岁年年/共欢同乐</p>
                <p>嘉庆与时新</p>
              </div>
            </div>
          </div>
          <div class="switch-text">
            <div class="img-box" id="switch-text-btn">
              <img src="img/switch-text.png">
            </div>
  <!--          <span id="switch-bth">-->
  <!--            换一组 <img src="img/ic_refresh.png" alt="">-->
  <!--          </span>-->
          </div>
        </div>
        <div class="save-text">
          <img src="img/save-btn.png" alt="">
        </div>
      </div>
      <div class="load-tip">
        <span>市场有风险  投资需谨慎 </span>
      </div>
    </div>


    <div class="page page3" id="preview-content">
      <div class="load-img"><img src="img/white-logo.png"></div>
  <!--    装饰-->
      <!-- <div class="decorate-1"><img src="img/icon-1.png"></div> -->
      <div class="decorate-2"><img src="img/icon-2.png"></div>
      <div class="preview-content theme">
        <img src="img/theme0.png">
      </div>
      <div class="from-box">
        <input class="userInput" placeholder="请输入你的名字" type="text" />
      </div>
      <div class="csBox content-text" width="900" height="200" left="0" top="860">
      </div>
  <!-- 操作 -->
      <div class="ope-box">
        <div class="button-style change-btn">
  <!--        切换主题-->
          <img src="img/switch-btn.png" alt="">
        </div>
        <div class="button-style sure-btn">
          <img src="img/sure-btn.png">
  <!--        保存贺卡-->
        </div>
      </div>
      <div class="load-tip">
        <span>市场有风险  投资需谨慎 </span>
      </div>
    </div>


  <!--合成照片-->
  <div class="page page4">
    <canvas class="stage-canvas" id="stageCanvas" width="750" height="1334"></canvas>
    <div class="mod-pic"><img class="show-pic" crossOrigin="Anonymous" src=""></div>
  </div>

</div>

<audio id="bgmusic" src="media/bgmusic.mp3" loop preload autoplay style="display: none"></audio>

<!--微信-->
<!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- <script src="js/bfscs_jssdk.js"></script> -->
<!--js-->
<script src="js/jquery.min.js"></script>
<script src="js/msTools-1.0.min.js"></script>
<script src="js/easeljs.min.js"></script>
<script src="js/layer.mobile.js"></script>
<script src="js/main.js"></script>
<!--<script src="js/vconsole.min.js?v=20181021"></script>-->


<!--检测代码-->
<!-- <script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?5d44af84926c365487cd4914ecb0b2d1";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script> -->

</body>
</html>
